<template>
	<view>
		<view class="search">
			<u--input v-model="query.searchValue" placeholder="视频监控名称/编号" :clearable="true" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" @clear="clear">
				<template slot="suffix">
					<view class="search_btn" @click="search"> 搜索</view>
				</template></u--input>
			<image src="/static/img/index/sx.png" class="shaixuan" @click="treeClick"></image>
		</view>

		<div class="tabs">
			<div :class="{
				active:current ==0
			}" @click="current =0">
				<u-icon name="grid-fill" size="24" :color=" current ==0 ?color :'#000'"></u-icon>
			</div>
			<div :class="{
				active:current ==1
			}" @click="current =1">
				<u-icon name="list-dot" size="24" :color=" current ==1 ?color :'#000'"></u-icon>
			</div>
		</div>
		<div class="list" v-if="current == 0">
			<div class="box" v-for="i in 10" :key="i" @click="nav">
				<image src="/static/logo.png" mode=""></image>
				<div class="box_botton">
					<div class="box_txt">
						<div class="box_left">
							西南角1号摄像头
						</div>
						<u-switch v-model="value4" size="16"></u-switch>
					</div>
					<div class="box_code">
						编码:229919
					</div>
				</div>
			</div>
		</div>

		<div class="" v-if="current ==1">
			<div class="list_dot">
				<div class="dot" v-for="i in 10" :key="i" @click="nav">
					<image src="/static/logo.png" mode="" class="dot_left"></image>
					<div class="dot_right">
						<div class="dot_bold">西南角1号摄像头</div>
						<div class="dot_txt">
							编码：229919
						</div>
						<div class="dot_txt">
							位置：二楼东南角
						</div>
						<div class="dot_txt" style="display: flex;">
							状态：<u-switch v-model="value4" size="16"></u-switch>
						</div>
					</div>
				</div>
			</div>
		</div>
		<tree ref="tree" @comit="treeComit" :treeData="treeData" :type="0"></tree>
	</view>
</template>

<script>
	import {
		getDeviceLocationList
	} from '@/api/lssue.js'
	export default {
		data() {
			return {
				query: {
					searchValue: ''
				},
				current: 0,
				color: '#FFF',
				value4: false,
				treeData: []
			};
		},
		onLoad() {
			this._getDeviceLocationList()
		},
		methods: {
			treeComit(e){
				console.log(e);
			},
			treeClick(){
				this.$refs.tree.itemclick(false, true)
			},
			_getDeviceLocationList() {
				getDeviceLocationList().then(res => {
					this.treeData = res.datas.map(ele => this.treeStructure(ele));
					console.log(res);
				})
			},
			treeStructure(ele) {
				const haveChildren = Array.isArray(ele.children) && ele.children.length > 0;
				return {
					id: ele.partition_id,
					label: ele.partition_name,
					checked: false,
					children: haveChildren ? ele.children.map(i => this.treeStructure(i)) : [],
				}
			},
			nav() {
				console.log(1);
				this.jumpTo('/pages/videoList/video')
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search {
		display: flex;
		align-items: center;

		/deep/.u-input {
			flex: 1;
			height: 65rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			margin: 0 auto;
			margin-top: 15rpx;
			border-radius: 32rpx;
		}

		&_btn {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			padding-left: 10rpx;
			border-left: 1rpx solid #E0E0E0;
		}
	}

	.shaixuan {
		width: 40rpx;
		height: 40rpx;
		margin: 0 20rpx;
		margin-top: 8rpx;
	}

	.tabs {
		margin-top: 20rpx;
		display: flex;
		margin-left: 20rpx;

		div {
			width: 100rpx;
			height: 80rpx;
			background-color: #FFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.active {
			background-color: rgb(38, 125, 255);
		}
	}

	.list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 10rpx;

		.box {
			flex: 1 0 45%;
			background-color: #FFF;
			margin-top: 20rpx;

			image {
				// width: 360rpx;
				width: 100%;
				height: 260rpx;
			}

			&_txt {
				display: flex;
				justify-content: space-between;
			}

			&_botton {
				padding: 10rpx;
			}

			&_left {
				font-size: 24rpx;
				font-weight: bold;
			}

			&_code {
				margin-top: 10rpx;
				color: #666666;
				font-size: 20rpx;
			}

		}

		.box:nth-child(2n-1) {
			margin-right: 10rpx;
		}
	}

	.dot {
		background-color: #FFF;
		border-radius: 4rpx;
		display: flex;
		padding: 20rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;

		&_left {
			width: 200rpx;
			height: 200rpx;
		}

		&_right {
			margin-left: 20rpx;
		}

		&_bold {
			font-weight: bold;
		}

		&_txt {
			margin-top: 8rpx;
			color: #666666;
		}
	}
</style>